import { Canvas, Meta, Source } from '@storybook/blocks'

import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
import * as HoverCardStories from './hover-card.stories'

<Meta of={HoverCardStories} />

<RadixPrimitiveDocsButton name='hover-card' />

# Hover Card

For sighted users to preview content available behind a link.

## Preview

<Canvas of={HoverCardStories.Default} />

## Usage

export const importCode = `import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@orbitkit/ui/hover-card";`

export const usageCode = `<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>
    The React Framework - created and maintained by @vercel.
  </HoverCardContent>
</HoverCard>`

<Source code={importCode} language='ts' dark />
<Source code={usageCode} language='tsx' dark />
